<template>
    <footer>
        <WaveAnimation />
        <div class="footer-content">
            <div class="footer-item">
                <div class="item" v-for="item in list" @click="toggleItem(item)">
                    <img :class="item.icon" v-lazy="useImage(item.icon)" />
                    <p class="title">{{ item.title }}</p>
                    <p class="desc">{{ item.desc }}</p>
                </div>
            </div>
        </div>
        <div class="footer-end">
            <p class="promise-text">律行者必成，特创者无限。</p>
            <p>Copyright © 2020-{{ curDate }} 上海律特科技有限公司&nbsp;&nbsp;沪ICP备2021033349号-2</p>
        </div>
        <CommonModel v-model:show="show">
            <img class="model-img" v-lazy="useImage(curImg)" />
        </CommonModel>
    </footer>
</template>

<script setup>
import WaveAnimation from '@/components/wave/index.vue'
import CommonModel from "@/components/model/index.vue";

const show = ref(false)
const curImg = ref('')
const toggle = (name) => {
    curImg.value = name
    show.value = !show.value
}

function toggleItem(item) {
    if (item.icon === 'wx') {
        toggle(item.icon)
    }
}

const curDate = computed(() => {
    let now = new Date();
    return now.getFullYear();
})

const useImage = (name) => {
    return name ? new URL(`../../../assets/images/${name}.png`, import.meta.url).href : ''
}
const list = [
    {
        icon: 'phone',
        title: '联系电话：',
        desc: '13391253823'
    },
    {
        icon: 'wx',
        title: '业务微信',
        desc: '陈经理'
    },
    {
        icon: 'email',
        title: '业务邮箱：',
        desc: 'seoyeo@163.com'
    },
    {
        icon: 'address',
        title: '公司地址：',
        desc: '上海市奉贤区南桥望园南路 1588弄1号A1栋1307室'
    },
]
</script>

<style scoped lang="scss">
footer {
    margin: 0 10px;

    :deep(.model-img) {
        width: 200px;
    }

    .footer-content {
        position: relative;
    }

    .footer-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        width: $box-width;
        overflow: hidden;

        @include respondTo(['phone', 'pad']) {
            width: 100%;
            flex-wrap: wrap;
            bottom: 10px;
        }

        @include respondTo(['phone']) {
            width: 400px;
            padding: 0 19px;
        }

        .item {
            display: flex;
            flex-direction: column;
            align-items: center;
            color: #fff;
            font-size: 16px;

            @include respondTo(['phone', 'pad']) {

                &:nth-child(1),
                &:nth-child(2) {
                    margin-bottom: 20px;
                }
            }

            .wx {
                cursor: pointer;
            }

            img {
                width: 52px;
                height: 52px;
                margin-bottom: 20px;
            }

            img.wx {
                width: 67px;
                height: 67px;
            }

            .title {
                margin-bottom: 5px;
            }

            .desc {
                text-align: center;
                width: 181px;
            }
        }
    }

    .footer-end {
        background: #0066ff;
        border-top: 1px solid #dcdcdc;
        padding: 20px 10px;
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        color: #fff;

        .promise-text {
            font-size: 18px;
            margin-bottom: 5px;
        }

        p {
            font-size: 12px;
            text-align: center;

            @include respondTo(['phone', 'pad']) {
                font-size: 11px;
            }
        }
    }
}
</style>
